<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <jsp:include page="head.jsp"></jsp:include>
    <link rel="stylesheet" href="<%= request.getAttribute("StaticHost") %>/css/square/blue.css">

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .loginContent{
            background: #fff;
            border-radius: 2px;
            padding: 20px 50px;
            height: 450px;
            width: 500px;
            margin-top: 164px;
        }
        .loginBox{
            width: 500px;
            margin: 7% auto;
        }
        .loginWap{
            margin: 13px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .loginWap input{
            margin: 10px 0;
            margin-bottom: 5px;
            outline-style: none;
            border: transparent;
            padding: 8px 65px 8px 20px;
            border-bottom: 1px solid #AAAAAA;
            font-size: 16px;
        }
        .theHead{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 30px;
        }
        .icon{
            width: 38px;
            height: 48px;
            background: url(<%= request.getAttribute("StaticHost") %>/img/l_logo.png) center no-repeat;
        }
        .theHead h4{
            margin-bottom: 0;
            margin-left: 10px;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            color: rgba(0,0,0,1);
        }
        .theBottom {
            margin-right: -15px;
            margin-left: -15px;
            margin-top: 20px;
        }

    </style>
</head>
<body class="hold-transition login-page">

<div style="position: fixed;z-index: 10;width:100%;height: 100%;
        background:url(<%= request.getAttribute("StaticHost") %>/img/login.jpg) no-repeat 100% 100%;background-size: cover;">

    <div class="loginBox">
        <div class="loginLogo">
            <%--<a href="${pageContext.request.contextPath}"><b style="color:#696969;">服务平台</b></a>--%>
        </div>
        <!-- /.login-logo -->
        <div class="loginContent">
            <div class="theHead">
                <div class="icon"></div>
                <h4>登陆 PayMent</h4>
            </div>

            <form>
                <div class="loginWap">
                    <input type="text" placeholder="请输入用户名" name="username" id="username" autocomplete="off">
                </div>
                <div class="loginWap">
                    <input type="password"  placeholder="请输入密码" name="password" id="password">
                </div>
                <div class="loginWap">
                    <input type="text" id="verifyCode" placeholder="请输入验证码" autocomplete="off">
                </div>
                <div class="theBottom">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox"> Remember Me
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="button" id="btnPassLogin" class="btn btn-primary btn-block btn-flat"
                            style="background: #2F8DC3;border: 2px solid #2F8DC3;">登 录</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-box-body -->
    </div>

</div>
<%--<button type="button" hidden id="yanzheng" data-toggle="modal" data-target="#newWhiteIpsModal">验证</button>--%>
<%--<div class="modal fade" id="newWhiteIpsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">--%>
<%--    <div class="modal-dialog" role="document">--%>
<%--        <div class="modal-content">--%>
<%--            <div class="modal-header">--%>
<%--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span--%>
<%--                        aria-hidden="true">&times;</span></button>--%>
<%--                <h4 class="modal-title control-label" id="newWhiteIpsModallabel">谷歌验证器</h4>--%>
<%--            </div>--%>
<%--            <div class="modal-body">--%>
<%--                <form class="form-horizontal">--%>
<%--                    <div class="form-group form-group-md">--%>
<%--                        <label class="col-sm-2 control-label" for="verifyCode">验证码:</label>--%>
<%--                        <div class="col-sm-10">--%>
<%--                            <input class="form-control" type="text" id="verifyCode" placeholder="请输入验证码">--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--            </div>--%>
<%--            <div class="modal-footer">--%>
<%--                <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>--%>
<%--                <button type="button" class="btn btn-primary" id="btnAjaxSubmit">提交</button>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>

<script src="<%= request.getAttribute("StaticHost") %>/js/google/jquery.min.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/bootstrap.min.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/icheck.min.js"></script>
<script type="application/javascript">
    $(function(){
        document.onkeydown = function(e){
            var ev = document.all ? window.event : e;
            if(ev.keyCode===13) {
                login();
            }
        }
    });
    $(document).ready(function () {
        //     $("#imgValidCode").click(function () {
        //         reloadValidCode();
        //     });
        //     // $("#password").on("keyup", function (event) {
        //     //     if (event.keyCode == 13) {
        //     //         //alert("a");
        //     //         $('#btnPassLogin').trigger("click");
        //     //     }
        //     // });
        //
        $('#btnPassLogin').on('click', function () {
            login();
            //         //先查询这个用户是否存在
            //         //如果存在，查看这个用户是否绑定谷歌验证器
            //         //如果绑定，则跳出谷歌验证器在登录
            //         //如果没绑定，直接登录
            //     //     var username = $('#username');
            //     //     $.ajax({
            //     //         type: 'POST',
            //     //         url: "/login/queryIpBind",
            //     //         data: { username: username.val()},
            //     //         success: function (data) {
            //     //             if (data) {
            //     //                 if (data.code == 200) {//没有绑定，直接登录
            //     //                     login();
            //     //                 }else if(data.code == 100){//已经绑定，跳转验证
            //     //                     $('#yanzheng').click();
            //     //                 }else{
            //     //                     alert(data.msg);
            //     //                 }
            //     //             } else {
            //     //                 alert('服务器异常，请稍后再试！');
            //     //             }
            //     //         },
            //     //         error: function () {
            //     //             alert('服务器异常，请稍后再试！');
            //     //         }
            //     //     })
        });
    });

    /*提交按钮点击事件*/
    // $("#btnAjaxSubmit").click(function(){
    //     if ($("#verifyCode").val()==null||$("#verifyCode").val()==""){
    //         alert("验证码不能为空");
    //         return;
    //     }
    //     login();
    // });


    function login() {
        var username = $('#username');
        var password = $('#password');
        var validCodeVal = $('#verifyCode');
        if (username.val() == '') {
            alert('请输入用户名');
            return false;
        }
        if (password.val() == '') {
            alert('请输入密码');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: "${pageContext.request.contextPath}/login/pass",
            data: {password: password.val(), username: username.val(), validCode: validCodeVal.val()},
            timeout: 10000,
            success: function (data) {
                if (data) {
                    if (data.code == 200) {
                        var url = data.data;
                        if (url) {
                            location.href = url;
                        } else {
                            location.href = '${pageContext.request.contextPath}/index';
                        }
                        return false;
                    } else {
                        alert(data.msg);
                        if (data.code == 440) {
                            location.href = '${pageContext.request.contextPath}/login/sign?uid=' + data.data;
                        }

                    }
                } else {
                    alert('网速不佳，请稍后再试！');
                }
            },
            error: function () {
                alert('服务器异常，请稍后再试！');
            }
        })
    }

    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });

        $("#sendValid").click(function () {
            var limit = 60;
            $("#sendValid").attr("disabled", true);
            var timer = setInterval(function () {
                if (--limit != 0) {
                    console.log(limit)
                    $("#sendValid").text(limit + "秒后重发");
                } else {
                    console.log("60s pass")
                    $("#sendValid").text("发送校验码");
                    $("#sendValid").attr("disabled", false);
                    clearInterval(timer);
                }
            }, 1000);

        });

    });
</script>
</body>
</html>